<template>
    <div id="createDataSource">
        <header id="header">
            <div class="left">
                <span>斯利安数据集</span>
                <i
                    class="el-icon-d-arrow-right"
                    @click="left.anStart = true"
                    v-if="left.anStart == false"
                ></i>
            </div>
            <div class="right">
                <el-button type="primary" size="small" @click="$router.go(-1)"
                    >返回</el-button
                >
                <el-button type="primary" size="small">保存</el-button>
            </div>
        </header>

        <main id="main">
            <!-- 左侧 -->
            <div id="left" v-if="left.anStart == true">
                <p class="leftTop">
                    <span>选择数据源</span>
                    <i
                        class="el-icon-d-arrow-left"
                        @click="left.anStart = false"
                    ></i>
                </p>
                <el-select
                    v-model="left.selectValue"
                    placeholder="请选择"
                    size="small"
                    @change="leftSelectChange"
                >
                    <el-option
                        v-for="(item, index) in left.dataSource"
                        :key="index"
                        :label="item"
                        :value="index"
                    >
                    </el-option>
                </el-select>
                <p class="leftCenter">
                    <span>数据表</span>
                </p>
                <el-input
                    placeholder="请输入内容要搜索的内容"
                    suffix-icon="el-icon-search"
                    v-model="left.searchValue"
                    size="small"
                    @input="leftSearch"
                >
                </el-input>
                <ul class="leftBottom">
                    <li
                        v-for="item in left.tablesRecords"
                        :key="item.id"
                        :title="`${item.tableName} / ${item.tableAlias}`"
                    >
                        <i class="el-icon-tickets"></i>
                        <p>
                            <span>{{ item.tableName }}</span>
                            <span>{{ item.tableAlias }}</span>
                        </p>
                    </li>
                </ul>
            </div>

            <!-- 右侧 -->
            <div
                id="right"
                :style="{ width: left.anStart == true ? '85%' : '100%' }"
            >
                <!-- 画板 -->
                <div id="rightCanvas">
                    <div class="dragDrop">
                        <img :src="right.img" />
                        <p>请从左侧拖拽数据表进行表关联</p>
                    </div>
                </div>
                <!-- 按钮 -->
                <div id="rightBtn">
                    <div>
                        <el-button type="primary" size="small" @click="sqlBtn"
                            >查看关联关系SQL</el-button
                        >
                        <el-button
                            type="primary"
                            size="small"
                            @click="calculateViewBtn"
                            >计算视图</el-button
                        >
                    </div>
                    <div>
                        <el-button type="primary" size="small"
                            >新建计算字段</el-button
                        >
                        <el-button type="primary" size="small">过滤</el-button>
                    </div>
                </div>
                <!-- table表 -->
                <div id="rightTable">
                    <el-table :data="right.resultList" border height="550">
                        <el-table-column
                            show-overflow-tooltip
                            v-for="(item, index) in right.fields"
                            :key="index"
                            :width="right.fields.length > 7 ? '200' : 'auto'"
                        >
                            <template #header>
                                <div
                                    class="headerTable"
                                    :style="{ color: item.color,background:item.background }"
                                >
                                    <span>{{ item.fieldAlias }}</span>
                                    
                                    <el-dropdown >
                                        <span class="el-dropdown-link">
                                            <i class="el-icon-setting" :style="{ color: item.color}"></i>
                                        </span>
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item v-for="(items,index) in right.tableOperation" :key="index" @click.native="handleCommand(item,index)">{{items}}</el-dropdown-item>
                                        </el-dropdown-menu>
                                        </el-dropdown>
                                </div>
                            </template>
                            <template slot-scope="scope">
                                {{ scope.row[item.fieldAlias] }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </main>

        <!-- 计算视图弹窗 -->
        <el-dialog
            :title="right.title"
            :visible.sync="right.sqlVisible"
            width="30%"
        >
            <span>{{ right.rightSql }}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="right.sqlVisible = false">取 消</el-button>
                <el-button type="primary" @click="right.sqlVisible = false"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { drawingBoard, calculateView } from "@/api/dataAnalysis/dataSource";
import falseData from "./JS/index.json";
export default {
    data() {
        return {
            left: {
                anStart: false, //false关闭 true为展开
                searchValue: "", //搜索框的内容
                selectValue: 1, //数据源选中
                dataSource: ["全部", "平台数据源", "自定义数据源"],
                tablesRecords: [] //所有的表
            },
            right: {
                img: require("./img/sqlDrop.png"),
                calculateData: falseData,
                title: "查看关联关系SQL",
                rightSql: "",
                sqlVisible: false, //sql弹窗状态
                resultList: [],
                fields: [],
                tableOperation:['编辑','删除'],//表头操作
            }
        };
    },
    created() {},
    mounted() {
        //获取的表方法
        this.leftDataTableBtn();
    },
    methods: {
        //获取所有的表
        leftDataTableBtn() {
            let list = {
                content: this.left.searchValue,
                type: this.left.selectValue,
                pageSize: 1000,
                pageNum: 1
            };
            drawingBoard(list).then(res => {
                this.left.tablesRecords = [];
                if (res.code == 200) {
                    this.left.tablesRecords = res.data.records;
                } else {
                    this.tables = [];
                }
            });
        },
        //左侧输入框搜索
        leftSearch() {
            this.leftDataTableBtn();
        },
        //左侧选项
        leftSelectChange() {
            this.leftDataTableBtn();
        },
        //计算视图--公用
        async calculateViews(item) {
            console.log("111");
            this.right.resultList = [];
            this.right.fields = [];
            let result = await calculateView(item);
            if (result.code == 200) {
                //根据表id生成随机颜色
                this.right.calculateData.tables.forEach((x,index)=>{
                    result.data.fields.forEach((y,indexs)=>{
                        if((index + 1) %2 == 0 && x.tableId == y.tableId){
                             this.$set(y, "color", 'white');
                              this.$set(y, "background", '#409eff');
                        }else{
                             this.$set(y, "color", 'white');
                             this.$set(y, "background", '#67c23a');
                        }
                    })
                })
                this.right.resultList = result.data.resultList; //表数据
                this.right.fields = result.data.fields; //表头
            } else {
                this.right.title = "报错提示";
                this.right.sqlVisible = true;
                this.right.rightSql = res.msg;
            }
            return result.code == 200 ? result.data : false;
        },
        // 计算视图--按钮
        async calculateViewBtn() {
            await this.calculateViews(this.right.calculateData);
        },
        //查看SQL
        async sqlBtn() {
            let start = await this.calculateViews(this.right.calculateData);
            if (start != false) {
                this.right.sqlVisible = true;
                this.right.rightSql = start.sql;
            }
        },
        //表单操作
        handleCommand(item,index){
            console.log(item)
            console.log(index)
            if(index == 0){
                alert('开发中')
            }else{
                this.tableOperationDeleteBtn(item)
            }
        },

        //表单操作-删除
        async tableOperationDeleteBtn(item){
            console.log('item')
            console.log(item)
            let fields = [] 
            fields = JSON.parse(JSON.stringify(this.right.calculateData.fields))
            fields = fields.filter(x=>x.fieldId != item.fieldId)  
            this.right.calculateData.fields = fields
            let start = await this.calculateViews(this.right.calculateData);
            if (start != false) {
                this.$message.success('删除成功');
            }
        },
    }
};
</script>

<style lang="scss">
@import "./scss/createDataSource.scss";
</style>
